<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
      input{
        ine-height: 21px;
        width: 100%;
        height: 30px;
        /*margin-bottom: 15px;*/
        padding: 10px 15px;
        -webkit-user-select: text;
        border: 1px solid rgba(0,0,0,.2);
        /*border-radius: 3px;*/
        outline: 0;
        border-radius: 0px;
        background-color: #fff;
        -webkit-appearance: none;
      }
      .regrist-button{
        margin:0 auto;
        margin-top: 50px;
        background: #ccc;
        cursor: pointer;
        border: none;
        font-size: 18px;
        display: block;
        width: 100%;
        margin-bottom: 10px;
        color:#fff;
        padding: 15px 0;
        border-radius:4px;
        text-align: center;
        vertical-align: top;
        white-space: nowrap;
        font-weight: 400;
        line-height: 20px;
        /*position: relative;*/
        outline:none;
      }
      .register-btn{
        background: #9d0152;
        border: none rgb(240, 148, 1);
      }
    </style>
</head>
<body style="height:100%;background: white;margin: 0 auto">
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span tapmode style="position:absolute;right:10px;font-size:14px;color:#9D0152" onclick="login()">登录</span>
</div>
<div class="wx_register_bg"  id="app">
    <div class="wx_container">
        <div style="width:100%">
            <div>
                <div class="coderegister_top">
                    <div style="font-size:30px;color:#9D0152;float:left;line-height: 50px;">Hi</div>
                    <div class="coderegister_top_word">欢迎来到友人店</div>
                </div>
            </div>
            <div class="rs_row_mes">
                <div class="row_input">
                    <input class="input" type="number" v-model.number="phone"  placeholder="请输入手机号码"  required/>
                </div>
                <div class="rs_row_mes_container">
                    <div class="row_div">
                        <input type="number" class="getcodecontent"  v-model="verify_code"  placeholder="请输入验证码"/>
                        <sendcode :phone="phone" :type="1" style="position:absolute;top:60%;"></sendcode>
                    </div>
                </div>
                <div class="row_input_bottom">
                  <input class="input" type="text" v-model="invitecode"  placeholder="请输入邀请码"  required/>
                </div>
                <div style="padding-top:15px"><span style="color:rgba(153,153,153,1);font-size:12px">关注友人店公众号</span><span style="color:#9d0152;font-size:12px">获取邀请码</span></div>

            </div>
          </div>
        </div>
        <div class="codeRegister_bottom">
          <button v-myclick="coderegister" type="button" class="regrist-button" :class="{'register-btn':invitecode&&phone&&invitecode}" >注册</button>

          <div class="register_agreement"><span>注册即表示您已阅读，并同意</span><span style="color:#9d0152" class="protocol" v-myclick="userAgreement">《用户注册协议》</span></div>
        </div>
      </div>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>
    var wap_url;
    var talkingData;
    phone='';
    invitecode='';
    apiready = function () {
        setBSImg();
        wap_url = getPrefs("wap_url");
        new Vue({
            el:'#blank',
        });
        talkingData = api.require('talkingData');
        wap_url = getPrefs("wap_url");
        initApp();
        api.parseTapmode();
    };

    function initApp() {
        var isBigImg = Vue.BSImg == 'big';
        new Vue({
            el: '#app',
            data:{
                phone:null,
                verify_code:null,
                invitecode:null,
                isTip:false,
                wap_url: wap_url,
                BSImg:{
                    big:isBigImg,
                    small:!isBigImg
                },
               hasClicked:false,
            },
            methods:{
                coderegister:function(){
                    if(!this.phone){
                        pinet.alert("请输入手机号");
                        return ;
                    }
                    if(!this.verify_code){
                        pinet.alert("请输入验证码");
                        return ;
                    }
                    if(!this.invitecode){
                        pinet.alert("请输入验证码");
                        return ;
                    }
                    if(this.hasClicked) {
                        // return;
                    }
                    this.hasClicked = true;
                    if(this.phone&&this.verify_code&&this.invitecode){
                      showProgress();
                      var data = {
                          phone:this.phone,
                          verify_code:this.verify_code,
                          invite_code:this.invitecode,
                          type:1
                      };
                      invitecode = this.invitecode;
                      phone = this.phone;
                      var callback = function (ret) {
                        var home = ret.content;
                        if(home.is_brand_or_promoter==true){
                          var addAttr = {
                            type: 6,
                            phone:phone,
                            invite_code:invitecode
                          };
                          openWin('../user/addshop', addAttr );
                        }else{
                          var that = this;
                          pinet.post(URL.coderegister, data, function (data) {
                              showProgress();
                              pinet.alert(data.message);
                              var user = data.content;
                              setPrefs('user', user);
                              setPrefs('token', user.token);
                              setPrefs('member_id', user.member_id);
                              var otherAttr = {
                                  bounces:false
                              };
                              that.hasClicked = false;
                              api.sendEvent({
                                  name: 'register'
                              });
                              openWin('../../index', null, otherAttr);
                          }, function (ret) {
                              that.hasClicked = false;
                              pinet.alert(ret.message);
                          });
                        }
                      };
                      pinet.post(URL.preRegister, data, callback);

                    }
                },
                userAgreement: function () {
                    var url = this.wap_url + 'home/agreement';
                    openWin('../home/browser', {url: url});
                }
            }
        })
    }
    function login(){
      openWin('login');
    }
</script>
</body>
</html>
